<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<link rel="stylesheet" href="CSS/sidebar.css" />
		<style>
			div{
				width: 300px;
				height: 300px;
				
			}
			div.taiyi{
				background: url("image/zhenren.png");
				background-size: 100% 100%;
				position: absolute;
				/* 堆叠属性;必须存在相对或者绝对定位情况下，z-index进行排序堆叠，取值范围1~9999 */
				z-index: 2;
			}
			div.bao{
				background: url("image/bao.png");
				background-size: 100% 100%;
				position: absolute;
				z-index: 10;
			}
		</style>
	</head>
	<body>
		<!-- 相对定位和绝对定位：页面弹出功能 
		              相对定位(relative)：相对于元素父级定位，元素存在于文档流当中
					  绝对定位(absolute)：存在父级，按照父级定位，无父级，左上角，元素脱离文档流
					  
					  堆叠问题：z-index属性：属性值，属性值越大越靠前
					  左栏使用相对定位：左栏区域基本不会移动
					  左栏弹出使用绝对定位：左栏弹出区域频繁切换
					  -->
    
    	<d iv class="taiyi"></div>
		<d iv class="bao"></div>
  

 <!-- 左栏效果 
          div取名————不利于SEO优化
          涵盖名称————利于SEO优化
		  建议：搭建页面结构，固定功能：左栏，主区域，导航
		  语义化元素：
		  article元素：独立的内容区域块，存：新闻博客，左栏弹出功能栏
		  -->
 <article>
 	<ul class="sidebar">
		<!-- 左栏弹出框：在无序列表首项 -->
		<div class="outer"></div>
 		<li ><a href="">手机 平板 电话卡  <span>&gt;</span></a> </li>
 		<li><a href="">电视 盒子 <span>&gt;</span></a> </li>
 		<li><a href="">路由器 智能硬件 <span>&gt;</span></a>  </li>
 		<li><a href="">移动电源 插线板 <span>&gt;</span></a></li>
 		<li><a href="">耳机 音响 <span>&gt;</span></a> </li>
 		<li><a href="">电池 存储卡 <span>&gt;</span></a> </li>
 		<li><a href="">保护套 后盖 <span>&gt;</span></a></li>
 		<li><a href="">贴膜 其他配件 <span>&gt;</span></a></li>
 		<li><a href="">米兔 服装 <span>&gt;</span></a> </li>
 		<li><a href="">箱包 其他周边 <span>&gt;</span></a> </li>
 	</ul>
 </article>